<script lang="ts" setup>
import TableArea from 've-table-area/index.vue'
import TableColumn from 've-table-column/index.vue'
import {tableHeight} from '@/assets/js/tableHeight'
import {computed, ref} from 'vue'
//@ts-ignore
import JsonViewer from 'vue-json-viewer'
import {convertStrToStr} from "@/assets/js/common";
import {createEmitter} from "@/assets/js/eventBus.ts";
import {SchedulingLogVo} from "@/interface/vo/task/schedulingLogVo.ts";

const emitter = createEmitter()

const props = defineProps({
  loading: {
    type: Boolean,
    required: true,
    default: () => false
  },
  tableData: {
    type: Array as () => Array<SchedulingLogVo>,
    required: true,
    default: () => []
  }
})

const columnList = computed(() => [
  {
    sortable: 'custom',
    prop: 'taskName',
    label: '标题'
  },
  {
    sortable: 'custom',
    prop: 'appName',
    label: '执行器名称'
  },
  {
    sortable: 'custom',
    prop: 'createTime',
    label: '创建时间'
  }
])

const onSortChange = (column: any) => {
  emitter.emit('refresh', column)
}

const handleRefresh = () => {
  emitter.emit('refresh')
}

const _fullScreen = ref(false)

const _tableHeight = ref()

const handleFullScreen = (fullScreen: boolean, tableHeight: number) => {
  _fullScreen.value = fullScreen
  _tableHeight.value = tableHeight
}
</script>

<template>
  <TableArea>
    <template #main>
      <el-table v-loading="props.loading"
                :data="props.tableData"
                :default-sort="{ prop: 'createTime', order: 'descending' }"
                :height="_fullScreen? _tableHeight: tableHeight"
                border
                @sort-change="onSortChange">
        <TableColumn
            :column-list="columnList"
            :expand="true"
            :index="false"
            :operation-show="false"
            :table-height="tableHeight"
            region-class="ve-table"
            @handle-full-screen="handleFullScreen"
            @handle-refresh="handleRefresh">
          <template #expand="scope">
            <el-descriptions border direction="vertical" size="small">
              <el-descriptions-item>
                <template #label>
                  <strong>任务参数</strong>
                </template>
                <json-viewer :value="convertStrToStr(scope.row.taskParam)" copyable
                             theme="my-awesome-json-theme"/>
              </el-descriptions-item>
            </el-descriptions>
            <el-descriptions border direction="vertical" size="small">
              <el-descriptions-item>
                <template #label>
                  <strong>响应结果</strong>
                </template>
                <json-viewer :value="convertStrToStr(scope.row.responseResult)" copyable
                             theme="my-awesome-json-theme"/>
              </el-descriptions-item>
            </el-descriptions>
          </template>
        </TableColumn>
      </el-table>
      <slot name="pagination"/>
    </template>
  </TableArea>
</template>

<style scoped>

</style>
